import { ref, Ref } from 'vue';
import BasicLayouts from '@/layouts/BasicLayouts.vue';
import AdminLayouts from '@/layouts/AdminLayouts.vue';
import SellerLayouts from '@/layouts/SellerLayouts.vue';

// 1. 定义布局类型枚举
export enum LayoutType {
  BASIC = 'BasicLayouts',
  ADMIN = 'AdminLayouts',
  SELLER = 'SellerLayouts'
}

// 2. 类型化组件映射
type LayoutComponents = {
  [key in LayoutType]: any;
};

// 3. 创建组件映射实例
const layoutComponents: LayoutComponents = {
  [LayoutType.BASIC]: BasicLayouts,
  [LayoutType.ADMIN]: AdminLayouts,
  [LayoutType.SELLER]: SellerLayouts
};

// 定义本地存储的键名
const LOCAL_STORAGE_KEY = 'currentLayout';

// 从本地存储获取当前布局
const getLayoutFromLocalStorage = (): LayoutType => {
  const storedLayout = localStorage.getItem(LOCAL_STORAGE_KEY);
  if (storedLayout && Object.values(LayoutType).includes(storedLayout as LayoutType)) {
    return storedLayout as LayoutType;
  }
  return LayoutType.BASIC;
};

// 4. 类型化响应式变量，初始值从本地存储获取
const currentLayout: Ref<LayoutType> = ref(getLayoutFromLocalStorage());

// 5. 安全的布局切换方法，同时更新本地存储
const changeLayout = (layoutName: LayoutType) => {
  if (Object.values(LayoutType).includes(layoutName)) {
    currentLayout.value = layoutName;
    localStorage.setItem(LOCAL_STORAGE_KEY, layoutName);
  } else {
    console.error(`Invalid layout name: ${layoutName}`);
  }
};

// 6. 导出必要内容
export { currentLayout, changeLayout, layoutComponents };